<template>
  <el-menu
    class="menus"
    background-color="#304156"
    text-color="#fff"
    unique-opened
    router
    :default-active="active"
    :collapse="collapse"
    :collapse-transition="false"
    active-text-color="#409eff"
  >
    <!-- 一级菜单 -->
    <el-submenu
      :index="item.id + ''"
      v-for="item in menuList"
      :key="item.id"
    >
      <template slot="title">
        <i :class="iconObj[item.id]"></i>
        <span>{{ item.authName }}</span> 
      </template>
      <el-menu-item
        :index="'/'+ subItem.path"
        v-for="subItem in item.children"
        :key="subItem.id + ''"
        >{{ subItem.authName }}</el-menu-item
      >
    </el-submenu>
  </el-menu>
</template>

<script>
import { menu } from '../../api/user'
export default {
  name: 'TreeMenu',
  props: {
    collapse: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      menuList: [], // 左侧菜单数据
      iconObj: {
        125: 'shop shop-haoyou',
        103: 'shop shop-quanxian',
        101: 'shop shop-shangpin',
        102: 'shop shop-dingdandingdanmingxishouzhimingxi',
        145: 'shop shop-shujutongji',
      },
      active: '/' // 当前激活的路由
    }
  },
  created() {
    this.getMeun()
    console.log(this.$route)
    this.active = this.$route.path
  },
  methods: {
    async getMeun() {
      try {
        const res = await menu()
        if (res.meta.status === 200) {
          this.menuList = res.data
        } else {
          this.$message.error(res.meta.msg)
        }
      } catch (error) {}
    },
  },
}
</script>

<style lang="less" scope>
.menus {
  border-right: none !important;
  .el-menu-item{
    margin-right: none;
  }
  .shop {
    border-right: 10px;
  }
}
</style>
